<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/modules/cms/front/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>${article.title}- ${category.name}</title>
<meta name="decorator" content="cms_default_${site.theme}" />
<meta name="description"
	content="${article.description} ${category.description}" />
<meta name="keywords" content="${article.keywords} ${category.keywords}" />
<link href="${ctxStaticTheme}/wz/css/zf.css-02.css" rel="stylesheet"
	type="text/css" />
<style id="table">
div table.noBorderTable td, div table.noBorderTable th, div table.noBorderTable caption
	{
	border: 1px dashed #ddd !important
}

div table {
	margin-bottom: 10px;
	border-collapse: collapse;
	display: table;
}

div td, div th {
	background: white;
	padding: 5px 10px;
	border: 1px solid #DDD;
}

div caption {
	border: 1px dashed #DDD;
	border-bottom: 0;
	padding: 3px;
	text-align: center;
}

div th {
	border-top: 2px solid #BBB;
	background: #F7F7F7;
}

div td p {
	margin: 0;
	padding: 0;
}
</style>
<style type="text/css">
body {
	font-family: Helvetica, STHeiti STXihei, Microsoft JhengHei,
		Microsoft YaHei, Tohoma, Arial;
	margin: 0;
	color: #222222;
	/* 	background: none repeat scroll 0 0 #F8F7F4; */
	height: 100%;
	position: relative;
}

#wz_title {
	color: #000000;
	font-size: 20px;
	font-weight: bold;
	margin: 0;
}

#wz_date {
	color: #8C8C8C;
	font-size: 11px;
}

.wz_fengmian {
	margin: 10px 0;
}

.wz_content {
	color: #3E3E3E;
	line-height: 1.5;
	overflow: hidden;
	width: 100%;
	font-size: 15px;
}

.wz_content img, .wz_content embed {
	max-width: 100%;
}

.seemore {
	background: none repeat scroll 0 0 #FFFFFF;
	border: 1px solid #D9D9D9;
	border-radius: 10px 10px 10px 10px;
	color: #DDDDDD;
	display: block;
	font-size: 16px;
	height: 33px;
	line-height: 33px;
	margin: 10px auto;
	text-align: center;
	text-decoration: none;
}

.seemore a.no_border {
	border: medium none;
}

.seemore a {
	border-right: 1px solid #DDDDDD;
	color: #535353;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

a.activity-meta {
	outline: 0 none;
	text-decoration: none;
}

a.activity-meta:active {
	color: #607FA6;
}

a.activity-meta:active .icon_link_arrow {
	background: url("${ctxStaticTheme}/images/link_arrow.png") no-repeat
		scroll 0 0/100% auto transparent;
}

.activity-info .icon_link_arrow {
	margin-left: 3px;
	margin-top: -5px;
}

.icon_link_arrow {
	background: url("${ctxStaticTheme}/images/link_arrow.png") no-repeat
		scroll 0 0/100% auto transparent;
	display: inline-block;
	height: 7px;
	vertical-align: middle;
	width: 7px;
}

.activity-meta {
	color: #607FA6;
	display: inline-block;
	font-size: 11px;
	margin-left: 8px;
	padding-bottom: 2px;
	padding-top: 2px;
}

.text-ellipsis {
	display: inline-block;
	max-width: 104px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/*顶部微信号*/
#biz-link {
	background: url("${ctxStaticTheme}/images/wz_toptiao.png") no-repeat
		scroll center center/100% 100% transparent;
	border: medium none;
	border-radius: 0 0 0 0;
	box-shadow: none;
	height: 42px;
	padding: 12px 12px 12px 62px;
	position: relative;
	text-align: left;
}

#biz-link .arrow {
	position: absolute;
	right: 15px;
	top: 25px;
}

#biz-link .logo {
	height: 42px;
	left: 5px;
	overflow: hidden;
	padding: 6px;
	position: absolute;
	top: 6px;
	width: 42px;
}

#biz-link .logo img {
	border-radius: 15px 15px 15px 15px;
	height: 42px;
	position: relative;
	width: 42px;
	z-index: 10;
}

#biz-link .logo .circle {
	background: url("${ctxStaticTheme}/images/wz_topquan.png") no-repeat
		scroll center center/100% 100% transparent;
	height: 54px;
	left: 0;
	position: absolute;
	top: 0;
	width: 54px;
	z-index: 100;
}

#nickname {
	color: #454545;
	font-size: 15px;
	text-shadow: 0 1px 1px white;
}

#weixinid {
	color: #A3A3A3;
	font-size: 12px;
	line-height: 20px;
	text-shadow: 0 1px 1px white;
}

.icons {
	border-radius: 5px 5px 5px 5px;
	height: 25px;
	overflow: hidden;
	position: relative;
	width: 25px;
}

.icons.arrow-r {
	background: url("${ctxStaticTheme}/images/mesgIcon.png") no-repeat
		scroll center center/100% auto transparent;
	height: 16px;
	width: 12px;
}

.btn {
	background-color: #FCFCFC;
	border: 1px solid #CCCCCC;
	border-radius: 5px 5px 5px 5px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	color: #222222;
	cursor: pointer;
	display: block;
	font-size: 15px;
	font-weight: bold;
	margin: 8px 0;
	padding: 10px;
	text-align: center;
	text-decoration: none;
}
</style>
<style type="text/css">
.wz_header { /*position:relative;height:100%;*/
	color: #222;
	font-family: Microsoft YaHei, Helvitica, Verdana, Tohoma, Arial,
		san-serif; /*background-color:#f0f0f0;*/
	margin: 0;
	padding: 0;
	text-decoration: none;
}

.wz_header a {
	color: #000000;
	text-decoration: none;
}

#ui-header {
	width: 100%;
	height: 46px;
	line-height: 46px;
	z-index: 3;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
}

#ui-header .fixed {
	display: block;
	margin: 0 auto;
	min-width: 320px;
	height: 46px;
	top: 0;
	border-bottom: 1px solid #D1D1D1;
	box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
	background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff),
		to(#f9f9f9));
	background-image: -webkit-linear-gradient(#ffffff, #f9f9f9);
	background-image: -moz-linear-gradient(#ffffff, #f9f9f9);
	background-image: -ms-linear-gradient(#ffffff, #f9f9f9);
	background-image: -o-linear-gradient(#ffffff, #f9f9f9);
	background-image: linear-gradient(#ffffff, #f9f9f9); /*opacity: 0.95;*/
}

.ui-title {
	min-height: 46px;
	text-align: center;
	font-size: 16px;
	font-weight: normal;
	display: block;
	margin: 10px 70px 0;
	padding: 0;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	outline: 0 !important;
	display: none;
	text-indent: -10px;
}

.ui-btn-left {
	position: absolute;
	top: 0px;
	left: 0px;
	background: url("${ctxStaticTheme}/images/wz_menu.png") no-repeat center
		center;
	display: block;
	width: 60px;
	height: 44px;
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	background-size: 24px auto;
}

.ui-btn-left_pre {
	position: absolute;
	top: 0px;
	left: 0px;
	background: url("${ctxStaticTheme}/images/wz_pre.png") no-repeat center
		center;
	display: block;
	width: 60px;
	height: 44px;
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	background-size: 24px auto;
}

.ui-btn-right {
	position: absolute;
	top: 0px;
	right: 0px;
	background: url("${ctxStaticTheme}/images/wz_refresh.png") no-repeat
		center center;
	display: block;
	width: 60px;
	height: 44px;
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	background-size: 28px auto;
}

.ui-btn-right_menu {
	position: absolute;
	top: 0px;
	right: 0px;
	background: url("${ctxStaticTheme}/images/wz_menu.png") no-repeat center
		center;
	display: block;
	width: 60px;
	height: 44px;
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	background-size: 24px auto;
}

.ui-btn-right_home {
	position: absolute;
	top: 0px;
	right: 0px;
	background: url("${ctxStaticTheme}/images/wz_home.png") no-repeat center
		center;
	display: block;
	width: 60px;
	height: 44px;
	text-indent: -9999px;
	margin: 0;
	padding: 0;
	background-size: 24px auto;
}

#ui-header li:hover {
	background-color: #000000;
}

#ui-header li:active {
	background-color: #000000;
}

#overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: #fff;
	opacity: 0;
	filter: alpha(opacity = 0);
	display: none;
	z-index: 4;
}

#win {
	position: absolute;
	top: 55px;
	left: 50%;
	width: 200px;
	margin: 0 0 0 -100px;
	display: none;
	z-index: 5;
}
/*popmenu*/
#popmenu {
	cursor: pointer;
	display: block;
	position: relative;
	text-align: center;
	width: 200px;
	margin: 0 auto
}

#popmenu:after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	right: 50px;
	top: 50%;
	margin-top: -2px;
	border-width: 5px 5px 0 5px;
	border-style: solid;
	border-color: #9D9D9D transparent;
}

.dropdown { /* Size and position */
	position: relative;
	display: block;
	margin: 0 auto;
	padding: 5px; /* Styles */
	background-color: rgba(47, 47, 47, 1);
	border-radius: 7px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.15);
	cursor: pointer;
	outline: none;
	list-style: none outside none;
}

.dropdown:after {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	bottom: 100%;
	right: 90px;
	border-width: 0 6px 6px 6px;
	border-style: solid;
	border-color: rgba(47, 47, 47, 0.9) transparent;
}

.dropdown:before {
	content: "";
	width: 0;
	height: 0;
	position: absolute;
	bottom: 100%;
	right: 88px;
	border-width: 0 8px 8px 8px;
	border-style: solid;
	border-color: rgba(0, 0, 0, 0.1) transparent;
}

.dropdown li {
	background-color: rgba(58, 58, 58, 1);
	display: block;
	float: left;
	height: 37px;
	overflow: hidden;
	width: 50%;
}

.dropdown li span {
	border-color: #494949 #181818 #181818 #494949;
	border-left: 1px solid #494949;
	border-style: solid;
	border-width: 1px;
	color: #FFFFFF;
	line-height: 37px;
	display: block;
	font-size: 15px;
	height: 37px;
	text-align: center;
	text-shadow: 0 2px 2px #000000;
	width: 100%;
	overflow: hidden;
}

.dropdown li:hover {
	background-color: rgba(0, 0, 0, 0.9);
}

.clr {
	display: block;
	clear: both;
	height: 1px;
	overflow: hidden;
}

.top46 {
	height: 46px;
	padding: 0;
	margin: 0
}
</style>
<script src="${ctxStaticTheme}/template/default/vip/js/jquery.js"
	type="text/javascript"></script>
<script
	src="http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/wxm-core1530d0.js"></script>
<script type="text/javascript">
		function cli_hide2(){
			$("#layer_mask2").hide();
			$('#forward2').hide();
			$('#men_pho_id').hide(); 
		}
		function men_pho_cli2(){
			$("#layer_mask2").show();
			$('#men_pho_id').show();
		}
		function cli_zhuanfa(){
			$("#layer_mask2").show();
			$('#forward2').show();
		}
	</script>
</head>
<body>

	<div class="layer-mask" id="layer_mask2"
		style="z-index: 10002; display: none; position: absolute; position: fixed; width: 100%; height: 100%; background-color: #1b1b1b; opacity: 0.9; top: 0; left: 0;"
		onClick="cli_hide2()"></div>
	<div class="helper forward" id="forward2"
		style="z-index: 11111;; display: none"></div>
	<div class="men_pho" id="men_pho_id"
		style="z-index: 10003; display: none"></div>
	<script type="text/javascript">
		window.onload = function () {
			var oWin = document.getElementById("win");
			var oLay = document.getElementById("overlay");	
			var oBtn = document.getElementById("popmenu");
			oBtn.onclick = function ()
			{
				oLay.style.display = "block";
				oWin.style.display = "block";	
			};
			oLay.onclick = function ()
			{
				oLay.style.display = "none";
				oWin.style.display = "none";
			};
		};
		
		function clickBack(){
			window.location.href = "${ctx}/list-${category.id}${urlSuffix}";
		/*    if (/(iPhone|iPad|iPod)/i.test(navigator.userAgent)) {             
		        window.location.href = "wz.php-mod=wzfenlei&openid=fromuserid&wzid=14251.htm#yyy.qq.com";
			} else { window.history.go("-1"); }*/
		}
	</script>
	<div class="wz_header">
		<div id="ui-header">
			<div class="fixed">
				<a class="ui-title" id="popmenu">选择分类</a> <a class="ui-btn-left_pre"
					href="javascript:" onClick="clickBack();"></a> <a
					class="ui-btn-right" href="javascript:window.location.reload();"></a>
			</div>
		</div>
		<div id="overlay"></div>
		<div id="win">
			<ul class="dropdown">
				<c:forEach items="${fnc:getMainNavList(site.id)}" var="category"
					varStatus="status">
					<li><a href="${category.url}"><span>${category.name}</span></a></li>
				</c:forEach>
				<div class="clr"></div>
			</ul>
		</div>
		<div class="top46"></div>
	</div>
	<div class="container" style="padding: 15px 15px 0;">
		<div class="row-fluid">
			<div class="span12">
				<div>
					<h4 id="wz_title">${article.title}</h4>
					<span id="wz_date">发布者：${article.createBy.name} &nbsp;
						点击数：${article.hits} &nbsp; 发布时间：<fmt:formatDate
							value="${article.createDate}" pattern="yyyy-MM-dd HH:mm:ss" />
						&nbsp; 更新时间：<fmt:formatDate value="${article.updateDate}"
							pattern="yyyy-MM-dd HH:mm:ss" />
					</span> <a class="activity-meta" href="weixin://addfriend/chinatea2014"
						onclick="men_pho_cli2()"> <span class="text-ellipsis">${article.description}</span>
						<i class="icon_link_arrow"></i>
					</a>
				</div>
				<div class="wz_fengmian">
					<img width="100%" src="${article.image}"></img>
				</div>
				<div class="wz_content">${article.articleData.content}</div>
				<div class="seemore">
					<a class="no_border"
						href="${ctx}/index-${site.id}${fns:getUrlSuffix()}">查看更多</a>
				</div>
				<div class="seemore"
					style="background: none repeat scroll 0 0 #5BB75B;">
					<a class="no_border" style="color: #FFFFFF;"
						href="weixin://addfriend/thinkgem" onclick="men_pho_cli2()">关注公众账号</a>
				</div>
				<div class="zf_wrapper_001">
					<div id="gallery">
						<button class="zf_wrapper_zhuangfa" type="button"
							onclick="cli_zhuanfa()">
							<span>转发</span><span><img
								src="${ctxStaticTheme}/wz/images/zf.png" width="16" /></span>
						</button>
						<button class="zf_wrapper_fenxiang" type="button"
							onclick="cli_zhuanfa()">
							<span>分享</span><span><img
								src="${ctxStaticTheme}/wz/images/fx.png" width="16" /></span>
						</button>
					</div>
					<!-- end of gallery-->
				</div>
				<div style="height: 30px;"></div>
				<div style="height: 50px;"></div>
			</div>
		</div>
	</div>
</body>
</html>
